import React from 'react';
import {Text, Button, FlatList, View} from 'react-native';
import {NativeStackNavigationProp} from '@react-navigation/native-stack';
import {useSelector, useDispatch} from 'react-redux';
import {increment, asyncIncrement} from '@/store/features/counterSlice'; // 引入actions
import Guess from './guess';
import {getOnlineMusics} from '@/api/index';
import {IGuess, IOnlineMusic} from '@/common/type';
import OnlineMusic from './OnlineMusic';

type xxx = {
  Home: {
    params: any;
  };
  Detail: {
    id: any;
  };
  Category: {
    id: any;
  };
  Album: any;
};
function TestView({navigation}: {navigation: NativeStackNavigationProp<xxx>}) {
  const {count} = useSelector((state: any) => state.counter);
  const dispatch = useDispatch();
  return (
    <View>
      <Text>这是Home Screen</Text>
      <Button
        title="Go to Detail"
        onPress={() =>
          navigation.navigate('Detail', {
            id: 100,
          })
        }
      />
      <Button
        title="Go to 分类"
        onPress={() =>
          navigation.navigate('Category', {
            id: 233,
          })
        }
      />
      <Text>测试redux---同步dispatch, {count}</Text>
      <Button
        title="测试redux---同步dispatch"
        onPress={() => {
          dispatch(increment({step: 2})); // dispatch派发action
        }}
      />
      <Text>测试redux---异步dispatch, {count}</Text>
      <Button
        title="测试redux---异步dispatch"
        onPress={() => {
          dispatch(asyncIncrement({step: 2})); // dispatch派发action
        }}
      />
    </View>
  );
}
interface IProps {
  navigation: NativeStackNavigationProp<xxx>;
}
class Home extends React.Component<IProps> {
  state = {
    onlineMusics: [],
    isRefreshing: false,
  };

  async getOnlineMusicsData() {
    const res = await getOnlineMusics();
    this.setState({
      onlineMusics: res.data,
    });
  }
  // 生成不重复的key，确认位置，减少开销
  keyExtractor = (item: IOnlineMusic) => {
    return item.id;
  };

  onRefresh = () => {
    // 1.修改刷新状态
    this.setState({
      isRefreshing: true,
    });
    // 2.获取数据
    // 3.修改刷新状态
    this.setState({
      isRefreshing: false,
    });
  };

  onEndReached = () => {
    console.log('加载更多。。。。');
  };

  get empty() {
    return (
      <View>
        <Text>暂无数据！</Text>
      </View>
    );
  }
  goAlbum = (data: IGuess) => {
    const {navigation} = this.props;
    navigation.navigate('Album', data);
    console.log(data, '----goAlbum');
  };

  componentDidMount(): void {
    this.getOnlineMusicsData();
  }
  renderItem = ({item, index}: {item: IOnlineMusic; index: number}) => {
    return <OnlineMusic index={index} item={item} />;
  };
  render(): React.ReactNode {
    const {onlineMusics, isRefreshing} = this.state;
    return (
      <FlatList
        data={onlineMusics}
        renderItem={this.renderItem}
        keyExtractor={this.keyExtractor}
        // 下拉刷新需要配合refreshing
        onRefresh={this.onRefresh}
        refreshing={isRefreshing}
        // 上拉加载更多
        onEndReached={this.onEndReached}
        // 是一个比例
        onEndReachedThreshold={0.2}
        ListHeaderComponent={() => (
          <Guess {...this.props} goAlbum={this.goAlbum} />
        )}
        ListEmptyComponent={this.empty}
        ListFooterComponent={() => (
          <TestView navigation={this.props?.navigation} />
        )}
      />
    );
  }
}
export default Home;
